<template>
  <div class="video-player-demo">
    <h2 class="demo-title">视频播放器示例</h2>
    
    <div class="player-container">
      <VideoPlayer
        ref="playerRef"
        :src="videoSrc"
        :type="videoType"
        :autoplay="false"
      />
    </div>
    
    <div class="demo-controls">
      <h3>播放器控制示例</h3>
      <div class="button-group">
        <el-button type="primary" @click="handlePlay">播放</el-button>
        <el-button type="primary" @click="handlePause">暂停</el-button>
        <el-button type="primary" @click="handleSeek(30)">跳转到30秒</el-button>
        <el-button type="primary" @click="handleSeek(60)">跳转到60秒</el-button>
      </div>
    </div>
    
    <div class="video-selector">
      <h3>选择视频</h3>
      <el-select v-model="selectedVideo" placeholder="请选择视频" @change="handleVideoChange">
        <el-option
          v-for="video in videoOptions"
          :key="video.value"
          :label="video.label"
          :value="video.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import VideoPlayer from '@/components/common/VideoPlayer.vue';

// 视频播放器引用
const playerRef = ref(null);

// 视频源选项
const videoOptions = [
  {
    label: '示例视频 1',
    value: 'https://www.w3schools.com/html/mov_bbb.mp4',
    type: 'video/mp4'
  },
  {
    label: '示例视频 2',
    value: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
    type: 'video/mp4'
  },
  {
    label: '示例视频 3',
    value: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    type: 'video/mp4'
  }
];

// 当前选中的视频
const selectedVideo = ref(videoOptions[0].value);

// 计算当前视频源和类型
const videoSrc = ref(videoOptions[0].value);
const videoType = ref(videoOptions[0].type);

// 处理视频选择变化
const handleVideoChange = () => {
  const selected = videoOptions.find(v => v.value === selectedVideo.value);
  if (selected) {
    videoSrc.value = selected.value;
    videoType.value = selected.type;
  }
};

// 播放器控制方法
const handlePlay = () => {
  playerRef.value?.play();
};

const handlePause = () => {
  playerRef.value?.pause();
};

const handleSeek = (seconds) => {
  playerRef.value?.seekTo(seconds);
};

// 组件挂载时初始化
onMounted(() => {
  // 可以在这里添加初始化逻辑
});
</script>

<style scoped>
.video-player-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.player-container {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.demo-controls {
  margin-bottom: 30px;
}

.demo-controls h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.video-selector {
  margin-bottom: 30px;
}

.video-selector h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
}
</style> 